<template>
    <div class="team">
        <div class="about-header animate__animated " :class="{animate__fadeInDown:animation}" v-show="animation">
             <hr style="background: #983C1A;">
            <div class="title">
                <div class="t1 f1" style="font-size: 26px; line-height: 30px; color: 707070;">{{ $t('index.team.title') }}</div>
                <div style="18px;color: #707070; opacity: .6; letter-spacing: 0;">Team</div>
            </div>
           <hr style="background: #983C1A;">
        </div>
        <div class="team-context">
            <div class="team-left">
                <div class="lawyer-item animate__animated" v-for="l in lawyer" :class="{animate__fadeInLeft:animation}"
                     v-show="animation">
                    <div class="lawyer-picture" :style="{background:`url('${l.img}')`,backgroundSize:'cover'}"></div>
                    <div class="lawyer-name f2">
                        {{ l.username }}
                    </div>
                    <div class="lawyer-describe" v-html="l.introduce+''"></div>
                </div>
            </div>
            <div class="team-right">
                <div class="box">
                    <div class="team-right-title animate__animated f1" :class="{animate__fadeInUp:animation}"
                         v-show="animation">{{ $t('index.team.right') }}
                    </div>
                    <div class="team-right-slogan animate__animated f-big-small" :class="{animate__fadeInUp:animation}"
                         v-show="animation">{{ title }}
                    </div>
                    <div class="team-right-content animate__animated f2" :class="{animate__fadeInUp:animation}"
                         v-show="animation" v-html="content">
                    </div>
                    <div class="team-button base-button animate__animated f2" :class="{animate__fadeInUp:animation}"
                         v-show="animation" @click="jumpExpertTeam">
                        {{ $t('index.team.button') }}
                    </div>
                </div>

            </div>
        </div>
    </div>

</template>
<script>
export default {
    props: ['lawyer', 'animation',"content","title"],
    methods:{
        jumpExpertTeam(){
            this.$router.push('/expertTeam')
        }
    }
}
</script>
<style lang="less">


.four-box {
    .team {
        width: 100%;
        height: 100%;
        flex-direction: row;
        background-image: url("~@/assets/img/home-four-bg.jpg");
        background-size: cover;
    }
    .team-context {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        //padding: 100px 0;

        .team-left {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 0 200px;
            width: calc(50% - 400px);
            height: 100%;

            .lawyer-picture {
                background: #000;
                border-radius: 1rem;
            }
            .lawyer-picture:after{
                content: '';
                display: block;
                padding-top: 133%;
            }

            .lawyer-item {
                width: 49%;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .lawyer-name {
                //padding: 0 5px;
                margin: 15px 0;
                height: 35px;
            }
            .lawyer-describe {
                padding: 0 5px;
                overflow: hidden;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 3;    /* 指定行数*/
                -webkit-box-orient: vertical;
            }
        }
        .team-right {
            position: relative;
            //display: flex;
            //flex-direction: column;
            //justify-content: space-evenly;
            height: 100%;
            width: 40%;
            .box{
                width: 100%;
                height: 50%;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            .team-right-title {
				text-align: center;
				font-size: 26px;
				line-height: 30px;
                color: #707070;
            }
            .team-right-slogan {
                margin-top: 22px;
				font-size: 18px;
				line-height: 22px;
				text-align: center;
            }
            .team-right-content{
                margin-top: 22px;
				line-height: 26rpx;
				font-size: 14px;
                height: 242px;
                overflow: hidden;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 7;    /* 指定行数*/
                -webkit-box-orient: vertical;
            }
            .team-button {
                color: #FFFFFF;
                padding: 10px 20px;
                margin-top: 19px;
                width: 30%;
                cursor: pointer;
				margin: 0 auto;
            }
        }
    }
}
</style>
